<template>
  <a-layout>
    <a-layout-header theme="dark">
      <div class="header">
        <div class="logo">
          <AppIcons iconName="DashboardOutlined" class="icon" />
          &nbsp;&nbsp;
          <span>WebApi定时调度中心</span>
        </div>
        <div style="flex: 1 1 0%"></div>
        <div>
          <a-menu theme="dark" mode="horizontal" :style="{ lineHeight: '63px' }" v-model:selectedKeys="selectedKeys">
            <a-menu-item key="project">
              <router-link to="/project">
                <span>项目管理</span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="task">
              <router-link to="/task">
                <span>任务管理</span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="doc">
              <router-link to="/doc">
                <span>文档</span>
              </router-link>
            </a-menu-item>
          </a-menu>
        </div>

        <div class="logout" @click="stop">
          <a href="javascript:;">退出</a>&nbsp;
          <app-icons iconName="LoginOutlined" />
        </div>
      </div>
    </a-layout-header>
    <a-layout-content class="p-24">
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import AppIcons from "@/components/AppIcons";
import tools from "@/services/tools";
import router from "@/router/index";

export default defineComponent({
  name: "App",
  components: { AppIcons },
  setup() {
    const state = reactive({
      selectedKeys: [router.currentRoute.value.name],
    });
    onMounted(() => {
      if (!tools.getAuthorization()) router.push("/login");
    });
    const methods = {
      stop() {
        tools.delAuthorization();
        router.push("/login");
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>
<style lang="less" scoped>
.ant-layout-header {
  color: rgba(255, 255, 255, 0.65);

  a {
    color: rgba(255, 255, 255, 0.65);
  }

  .header {
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;

    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      justify-content: center;
      align-items: center;
      display: flex;

      .anticon {
        font-size: 35px;
      }
    }

    .logout {
      padding: 0 20px;
    }

    .logout:hover {
      cursor: pointer;
      background: #1890ff;
      color: #ffffff;
      a {
        color: #ffffff;
      }
    }
  }
}
</style>
